<head>
    <title>JSBridgeTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <script src="zero-js-bridge.js"></script>
    <style type="text/css">
        input{
            padding: 7px;
        }
        .group-header{
            margin-top: 7px;
            font-weight: bold;
        }
    </style>

</head>
<body style="display: flex;flex-direction: column">

<div style="display: flex;flex-direction: row;align-items: center">
    <h3>JSBridge测试</h3>
    <a style="margin-left: 20px" href="javascript:location.reload()"><h5>刷新</h5></a>
</div>

<div style="display: flex;flex-direction: row">
    <input style="flex: 1" id="methodName" type="text" value="getSystemInfo"/>
    <input style="flex: 1;margin-left: 5px" type="button" value="canIUse" onclick="canIUse()"/>
</div>
<div style="display: flex;flex-direction: row">
<input style="margin-top: 5px" type="button" value="not support module" onclick="exeNotSupportModule()"/>
<input style="margin-top: 5px; margin-left: 5px" type="button" value="not support method" onclick="exeNotSupportMethod()"/>
</div>
<script>
    function canIUse() {
        alert(z.canIUse(methodName.value));
    }
    function exeNotSupportModule() {
        z.errorModule({
            success:function (data) {
                alert(JSON.stringify(data))
            },
            fail:function (err) {
                alert(JSON.stringify(err))
            }
        });
    }
    function exeNotSupportMethod() {
        z.errorMethod({
            success:function (data) {
                alert(JSON.stringify(data))
            },
            fail:function (err) {
                alert(JSON.stringify(err))
            }
        });
    }
</script>
<label class="group-header">设备</label>
<input style="margin-top: 5px" type="button" value="getSystemInfo" onclick="getSystemInfo()"/>
<script>
    function getSystemInfo() {
        z.getSystemInfo({
            success:function (data) {
                alert(JSON.stringify(data))
            },
            fail:function (err) {
                alert(JSON.stringify(err))
            }
        })
    }
</script>
<input style="margin-top: 5px" type="button" value="scan" onclick="scan()"/>
<script>
    function scan() {
        z.scan({
            success:function (data) {
                alert(JSON.stringify(data))
            },
            fail:function (err) {
                alert(JSON.stringify(err))
            }
        })
    }
</script>
<input style="margin-top: 5px" type="button" value="vibrate" onclick="vibrate()"/>
<script>
    function vibrate() {
        z.vibrate({
            success:function () {
                alert('震动了')
            },
            fail:function (err) {
                alert(JSON.stringify(err))
            }
        })
    }
</script>
<div style="display: flex;flex-direction: row;margin-top: 5px;align-items: center">
    <div style="flex: 1;display: flex;margin: 2px;padding: 7px">
        <input type="checkbox" id="keepOn" value="original"/><label for="keepOn">常亮</label>
    </div>
    <input style="flex: 1;" type="button" value="setKeepScreenOn" onclick="setKeepScreenOn()"/>
</div>
<script>
    function setKeepScreenOn() {
        z.setKeepScreenOn({
            keepScreenOn: keepOn.checked,
            success: function () {
                alert("设置成功")
            },
            fail: function (err) {
                alert(JSON.stringify(err))
            }
        })
    }
</script>
<div style="display: flex;flex-direction: row;margin-top: 5px;">
    <input id="brightness" type="range" style="flex: 1;" min="0.1" max="1" step="0.01" defaultValue="0.5">
    <input style="flex: 1;" type="button" value="setScreenBrightness" onclick="setScreenBrightness()"/>
</div>
<script>
    function setScreenBrightness() {
        z.setScreenBrightness({
            brightness:brightness.value,
            success:function () {
                alert("设置成功")
            },
            fail:function (err) {
                alert(JSON.stringify(err))
            }
        })
    }
</script>
<input style="margin-top: 5px" type="button" value="getScreenBrightness" onclick="getScreenBrightness()"/>
<script>
    function getScreenBrightness() {
        z.getScreenBrightness({
            success:function (data) {
                alert(JSON.stringify(data))
            },
            fail:function (err) {
                alert(JSON.stringify(err))
            }
        })
    }
</script>
<label class="group-header">页面</label>
<input style="margin-top: 5px" type="button" value="closeWindow" onclick="closeWindow()"/>
<script>
    function closeWindow(){
        z.closeWindow();
    }
</script>
<input style="margin-top: 5px" type="button" value="openWindow" onclick="openWindow()"/>
<script>
    function openWindow(){
        z.openWindow({
            url:"https://www.baidu.com",
            success:function(data){
                //alert(data.message)
            },
            fail:function(err){
                alert(err.message)
            }
        });
    }
</script>
<label class="group-header">多媒体</label>
<div style="display:flex;flex-direction:column;">
    <div>
        <label style="display:inline-block;width: 130px;margin-top: 5px">count：</label>
        <select id="chooseImageCount"  style="min-width: 100px">
            <option value="1" selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
    </div>
    <div>
        <label style="display:inline-block;width: 130px;margin-top: 5px">sizeType：</label>
        <input type="checkbox" id="original" value="original"/><label for="original">原图</label>
        <input type="checkbox" id="compressed" value="compressed"/><label for="compressed">压缩图</label>
    </div>
    <div>
        <label style="display:inline-block;width: 130px;margin-top: 5px">sourceType：</label>
        <input type="checkbox" id="camera" value="camera"/><label for="camera">拍照</label>
        <input type="checkbox" id="album" value="album"/><label for="album">相册</label>
    </div>
</div>
<input style="margin-top: 5px" type="button" value="chooseImage" onclick="chooseImage()"/>
<script>
    function chooseImage() {
        var count = chooseImageCount.options[chooseImageCount.selectedIndex].value;

        var sizeType = [];
        if (original.checked) sizeType.push('original');
        if (compressed.checked) sizeType.push('compressed');

        var sourceType = [];
        if (camera.checked) sourceType.push('camera');
        if (album.checked) sourceType.push('album');

        z.chooseImage({
            count: count,
            sizeType: sizeType,
            sourceType: sourceType,
            success: function (data) {
                alert(JSON.stringify(data))
            },
            fail: function (err) {
                alert(JSON.stringify(err))
            }
        })
    }
</script>
<input style="margin-top: 5px" type="button" value="previewImage" onclick="previewImage()"/>
<script>
    function previewImage() {
        z.previewImage({
            urls:[
                "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1544136538,3654741800&fm=26&gp=0.jpg",
                "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3546372338,4115837173&fm=26&gp=0.jpg",
                "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3043548194,1626364346&fm=26&gp=0.jpg",
                "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1492291150,508908617&fm=26&gp=0.jpg",
                "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2205360954,2565359913&fm=26&gp=0.jpg",
                "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3275087658,1806323879&fm=26&gp=0.jpg",
                "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1749577741,1593333368&fm=26&gp=0.jpg",
            ],
            //current:4,
            success:function (data) {
                console.log(JSON.stringify(data))
            },
            fail:function (err) {
                alert(err.message);
            }
        })
    }
</script>
</body>
</html>
